.mf_form {
  .mf_backend_field_note {
    display: block;
    margin-top: .5rem;
    color: #838fa1;
    font-size: 1.2rem;
  }
  .header_button_area {
  }
  .section_header {
    border-bottom: 1px solid #01AEFF;
    padding-bottom: .75rem;
    margin: 3rem auto 1.2rem;
    display: flex;
    justify-content: space-between;
    .section_name {
      font-size: 20px;
      font-weight: 400;
      color: #324452;
      letter-spacing: 0;
      line-height: 20px;
      &::before {
        content: '';
        display: inline-block;
        width: 4px;
        height: 20px;
        background-color: #01AEFF;
        vertical-align: top;
        margin-right: 8px;
      }
    }
    button.section_open {
      background-image: url("/assets/addons/ykx/img/section-open.svg");
      background-size: contain;
      background-repeat: no-repeat;
      border-style: none;
      width: 20px;
      height: 20px;
    }
    button.section_close {
      background-image: url("/assets/addons/ykx/img/section-close.svg");
      background-size: contain;
      background-repeat: no-repeat;
      border-style: none;
      width: 20px;
      height: 20px;
    }
  }

  button.add {
    background-image: url("/assets/img/add.svg");
    background-size: contain;
    background-repeat: no-repeat;
    border-style: none;
    width: 20px;
    height: 20px;
  }
  button.sub {
    background-image: url("/assets/img/sub.svg");
    background-size: contain;
    background-repeat: no-repeat;
    border-style: none;
    width: 20px;
    height: 20px;
  }
  .mf_item {
    margin-top: 1rem;
    border: 1px solid #E3E3E3;
    display: flex;
    flex-flow: row nowrap;
    .item_header {
      background-color: #E3E3E3;
      display: flex;
      align-items: center;
      padding: 0 6px;
    }
    .item_container {
      flex: 1;
      padding: 10px;
      .mf_input_group {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        &:not(:first-child) {
          margin-top: 1rem;
        }
      }
      .label_container {
        display: flex;
        margin-bottom: .75rem;
        justify-content: space-between;
        align-items: center;
        .msg-wrap {
          position: static;
        }
      }
    }
  }

  [data-tip] {
    position:relative;

  }
  [data-tip]:before {
    content:'';
    /* hides the tooltip when not hovered */
    display:block;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #CB7C7C;
    position:absolute;
    top:-8px;
    left: 24px;
    z-index:8;
    font-size:0;
    line-height:0;
    width:0;
    height:0;
  }
  [data-tip]:after {
    display:block;
    content:attr(data-tip);
    position:absolute;
    top:-38px;
    left:15px;
    padding: 1rem;
    background:#CB7C7C;
    color:#fff;
    z-index:9;
    font-size: 1rem;
    line-height: 1rem;
    -webkit-border-radius: .5rem;
    -moz-border-radius: .5rem;
    border-radius: .5rem;
    white-space:nowrap;
    word-wrap:normal;
  }

}

.custom_page_container {
  width: calc(100% - 30px);
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;

  .widget_box {
    width: 360px;


    border: 1px solid #E3E3E3;
    border-radius: 4px;

    padding: 1rem;
    .header {
      //position: fixed;
      .box_name {
        font-size: 16px;
        color: #7D7D7D;
        font-weight: bold;
        border-bottom: 1px solid #E3E3E3;
        padding-bottom: .75rem;
        &::before {
          content: '';
          display: inline-block;
          width: 4px;
          height: 20px;
          background-color: #01AEFF;
          vertical-align: top;
          margin-right: 8px;
        }
      }
      .button_area {
        padding: .75rem 0;
      }
    }

    .widget_area {
      height: calc(100vh - 150px);
      overflow:auto;
      .section {
        margin-top: .75rem;
        .section_header {
          display: flex;
          justify-content: space-between;
          font-size: 14px;
          color: #7D7D7D;
          button.section_close {
            background-image: url("/assets/img/section-open.svg");
            background-size: contain;
            background-repeat: no-repeat;
            border-style: none;
            width: 14px;
            height: 14px;
          }
          button.section_open {
            background-image: url("/assets/img/section-close.svg");
            background-size: contain;
            background-repeat: no-repeat;
            border-style: none;
            width: 14px;
            height: 14px;
          }
        }
        .section_body {
          .item {
            border: 1px solid #E3E3E3;
            &:hover .overlay{
              display: block;
              cursor: pointer;
            }
            position: relative;
            margin: 1rem 0;
            .overlay {
              display: none;
              .name {
                position: absolute;
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 20px;
                color: #FFFFFF;
                background: rgba(126,126,126,0.80);
              }
            }
          }
        }
      }
    }


  }
  .browser_box {
    margin: 0 15px;
    border: 1px solid #E3E3E3;
    border-radius: 4px;
    flex: 1;

    padding: 1rem;
    .header {
      &.selected, &:hover{
        border: 2px dashed #5CC8FA;
        position: relative;
      }
      border: 1px solid #BEBEBE;
      border-radius: 4px;
      padding: 4px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      span {
        font-size: 14px;
        color: #7D7D7D;
        margin-left: .75rem;
      }
      cursor: pointer;
    }
    .contain_area {
      height: calc(100vh - 80px);
      overflow:auto;
      margin-top: .5rem;
      .item {
        &.selected, &:hover{
          border: 2px dashed #5CC8FA;
          .delete {
            display: block;
          }
        }
        position: relative;
        .delete {
          display: none;
          position: absolute;
          bottom: 0;
          right: 0;
          background-color: #989898;
          font-size: 16px;
          color: #FFFFFF;
          padding: 2px 6px;
          cursor: pointer;
        }
        margin-top: .5rem;
        border: 1px solid #E0E0E0;
        cursor: move;
      }
    }

  }
  .editor_box {
    padding: 15px;
    flex: 1;
    border: 1px solid #E3E3E3;
    border-radius: 4px;
    .header {
      font-size: 16px;
      color: #7D7D7D;
      font-weight: bold;
      border-bottom: 1px solid #E3E3E3;
      padding-bottom: .75rem;
      &::before {
        content: '';
        display: inline-block;
        width: 4px;
        height: 20px;
        background-color: #01AEFF;
        vertical-align: top;
        margin-right: 8px;
      }
    }
    .box_container {
      margin-top: 1rem;
    }
    .mf_img_preview {
      display: flex;
      align-content: center;
      justify-content: center;
      border: 1px solid rgb(210, 214, 222);
      width: 200px;
      height: 134px;
      margin: 10px 0;
      background-color: #69CFFF;
      overflow: hidden;
      img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
      }

    }
  }
}
